<template>
    <el-button type="primary" :icon="Plus" @click="$emit('setShowStatus', ShowStatus.SKU_FORM)">添加SPU</el-button>
    <el-table :data="list">
        <el-table-column label="序号" border style="margin: 20px 0;" type="index"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button type="primary" :icon="Plus" title="添加SKU" size="small"
                    @click="$emit('setShowStatus', ShowStatus.SKU_FORM)"></el-button>
                <el-button type="primary" :icon="Edit" size="small" title="修改SPU" @click="clickUpdateSpu(row)"></el-button>

                <el-button type="info" :icon="InfoFilled" size="small" title="查看SKU列表"></el-button>
                <el-button type="danger" :icon="Delete" size="small" title="删除SPU"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="page" v-model:page-size="limit" :total="total" :page-sizes="[3, 6, 9]"
        layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getList" @size-change="getList" />
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { ShowStatus } from '../types'
import { Delete, Edit, InfoFilled, Plus } from
    '@element-plus/icons-vue';
import { useCategoryStore } from '@/stores/category';
import type { SpuListModel, SpuModel } from '@/api/product/model/spuModel';
import { storeToRefs } from 'pinia';
import { getSpuListApi } from '@/api/product/spu';
export default defineComponent({
    name: 'SpuList'
})

</script>
<script lang="ts" setup>




// 声明定义自定义事件, 返回的是分发事件的函数
const emit = defineEmits<{
    (e: 'setShowStatus', value: ShowStatus): void
    (e: 'setSpu', value: SpuModel): void
}>()


//点击修改spu
const clickUpdateSpu = (row: SpuModel) => {
    //显示Spu修改的Form
    emit('setShowStatus', ShowStatus.SPU_FORM)
    //传递选择的spu，当前的row
    emit('setSpu', {
        ...row,
        spuImageList: [],
        spuSaleAttrList: []
    })
}

//spu分页列表
const list = ref<SpuListModel>([])
const total = ref(0)
const page = ref(1)
const limit = ref(3)

const { category3Id } = storeToRefs(useCategoryStore())

watch(category3Id, (value) => {
    if (value) {
        getList()
    } else {
        list.value = []
        total.value = 0
    }
}, { immediate: true })



//请求显示当前分页列表
async function getList() {
    const result = await getSpuListApi({
        page: page.value,
        limit: limit.value,
        category3Id: category3Id.value!// !指定表达式的值是非空(不是undefined或null)
    })
    list.value = result.records
    total.value = result.total
}
</script>

<style lang="less" scoped></style>